<title>分类管理</title>
<div class="layui-fluid classManager">
    <div class="layui-row">

        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-header ">
                    <span class="layui-breadcrumb" lay-filter="breadcrumb">
                        <a href="javascript:;">一级分类</a>
                        <a><cite>二级分类</cite></a>
                      </span>
                </div>

                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-sm" data-type="addClass">
                        <i class="layui-icon">&#xe608;</i> 添加
                    </button>
                    <hr>
                    <table class="layui-table" id="classEle" lay-filter="test3">
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$; //由于layer弹层依赖jQuery，所以可以直接得到

        table.render({
            elem : '#classEle',
            url:'./json/class/class1.js',
            id:'test3',
            page:'true',
            cols : [[
                {type:'checkbox'},
                {field:'id', title: 'ID', width:200, sort: true},
                {field:'classname', title : '分类', width:400, sort: true},
                {fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
            ]]
        });

        //监听工具条
        table.on('tool(test3)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                // layer.alert('编辑行：<br>' + JSON.stringify(data));
                layer.prompt({
                    formType: 0,
                    value: data.classname,
                    title: '请输入分类名',
                    area: ['200px', '40px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    alert(value); //得到value
                    layer.close(index);
                });
            }
        });


        var active = {
            addClass: function () {
                layer.prompt({
                    formType: 0,
                    title: '新增分类[' + $('.layui-breadcrumb cite').text() + ']',
                    area: ['200px', '40px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    alert(value); //得到value
                    layer.close(index);
                });
            }
        };

        $('.classManager .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听单元格编辑
        table.on('edit(test3)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
        });
    });
</script>